<template>
	<view>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<u-popup :show="showBox" mode="center" @close="showBox = false">
			<view>{{ pointDat.name }}</view>
			<u-input v-model="causeTxt" type="text" border="true" />
			<uni-forms-item label="图片" name="picture">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"></u-upload>
			</uni-forms-item>
			<button @click="AddTaskPoint">提交</button>
		</u-popup>
		<uni-list>
			<uni-swipe-action ref="swipeAction">
				<uni-swipe-action-item
					v-for="(item, index) in InspectPoint"
					:right-options="options1"
					:key="item.id"
					@change="swipeChange($event, index)"
					@click="swipeClick($event, item)"
				>
					<uni-list-item :title="item.name" :note="item.address" showArrow clickable :rightText="item.state == 1 ? '完成' : '未完成'" @click="ToDetail(item)" />
				</uni-swipe-action-item>
			</uni-swipe-action>
		</uni-list>
	</view>
</template>

<script>
import { uploadFile, getInspectTask, addTaskPoint, getPointInfo } from '@/api/system/user.js';
export default {
	data() {
		return {
			UserId: '',
			taskDid: '',
			codeData: '',
			InspectPoint: [],
			fileList1: [], //图片list
			showBox: false,
			InspectionId: '',
			imageValue: [],
			picTxt: '',
			causeTxt: '',
			msgType: 'success',
			messageText: '这是一条成功提示',
			pointDat: {
				name: ''
			},
			options1: [
				{
					text: '扫码',
					style: {
						backgroundColor: '#00f1f5'
					}
				}
			]
		};
	},
	onLoad(option) {
		try {
			this.UserId = uni.getStorageSync('userID');
			if (this.UserId) {
				console.log(this.UserId);
			}
		} catch (e) {
			// error
		}
		if (option.id) {
			this.InspectionId = option.id;
			this.GetInspectTask(this.InspectionId);
		}
	},
	methods: {
		Scode(pointNum) {
			var _this = this;
			// 只允许通过相机扫码
			uni.scanCode({
				onlyFromCamera: true,
				success: function (res) {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
					if (pointNum == res.result) {
						_this.codeData = res.result;
						_this.GetPointInfo(res.result);
						_this.showBox = true;
					} else {
						_this.msgType = 'error';
						_this.messageText = `扫码点位不一致`;
						_this.$refs.message.open();
					}
				}
			});
			// console.log('res.result:', _this.codeData);
		},
		// 获取上传状态
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			// const result = '';
			for (let i = 0; i < lists.length; i++) {
				const result = await uploadFile(lists[i].url).then((res) => {
					// console.log(res);
					return res.url;
				});
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
				console.log('fileList1', this.fileList1);
			}
		},
		GetInspectTask(id) {
			getInspectTask(id).then((res) => {
				this.InspectPoint = res.rows;
				console.log('getInspectTask', res);
			});
		},
		GetPointInfo(codeid) {
			getPointInfo(codeid).then((res) => {
				this.pointDat = res.data;
			});
		},
		swipeChange(e, index) {
			// console.log('返回：', e);
			// console.log('当前索引：', index);
		},
		//左滑触发
		swipeClick(e, item) {
			let { content } = e;
			if (content.text === '扫码') {
				// this.showBox = true;
				this.Scode(item.pointNum);
				console.log('item.inspectionTaskId', item);
				this.taskDid = item.inspectionTaskId;
			}
		},
		AddTaskPoint() {
			this.fileList1.map((item) => {
				this.imageValue.push(item.url);
			});
			this.picTxt = this.imageValue.toString();
			const PointForm = {
				id: this.taskDid,
				inspectionId: this.InspectionId,
				inspectionPointId: this.pointDat.id,
				serviceId: this.UserId,
				picture: this.picTxt,
				checkState: 1,
				cause: this.causeTxt
			};
			addTaskPoint(PointForm).then((res) => {
				if (res.code == 200) {
					this.showBox = false;
					this.msgType = 'success';
					this.messageText = `巡逻点提交成功`;
					this.$refs.message.open();
					this.GetInspectTask(this.InspectionId);
				}
			});
		}
	}
};
</script>

<style lang="scss">
.example-body {
	padding: 10px;
	padding-top: 0;
}
</style>
